import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _BottomNavigationBarState createState() => _BottomNavigationBarState();
}

class _BottomNavigationBarState extends State<MyBottomNavigationBar>
    with TickerProviderStateMixin {
  int _currentTabIndex = 0;
  List<List<AnimationController>> _controllers;
  List<List<Widget>> animations;

  @override
  void initState() {
    _controllers = List.generate(
        assetsForAnimatedTabIcon.length,
        (index) => [
              AnimationController(
                  vsync: this, upperBound: 0.99, lowerBound: 0.0, value: 0.99),
              AnimationController(
                  vsync: this, upperBound: 0.99, lowerBound: 0.0, value: 0.99),
            ]);

    animations = List.generate(assetsForAnimatedTabIcon.length, (index) {
      return [
        Lottie.asset(assetsForAnimatedTabIcon[index][0],
            controller: _controllers[index][0], onLoaded: (composition) {
          _controllers[index][0].duration = composition.duration;
        }),
        Lottie.asset(assetsForAnimatedTabIcon[index][1],
            controller: _controllers[index][1], onLoaded: (composition) {
          _controllers[index][1].duration = composition.duration;
        }),
      ];
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(top: BorderSide(color: Colors.grey[200], width: 0.1)),
        ),
        child: SizedOverflowBox(
          alignment: Alignment.bottomCenter,
          size: Size(MediaQuery.of(context).size.width, 52),
          child: Container(
            color: Colors.transparent,
            height: 65,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ...List.generate(assetsForAnimatedTabIcon.length, (index) {
                  return Expanded(
                    child: GestureDetector(
                      onTap: () => _handleBottomNavigationBarTap(index),
                      child: Stack(
                        children: [
                          Opacity(
                            opacity: _currentTabIndex == index ? 1 : 0.00,
                              child: animations[index][1]),
                          Opacity(
                              opacity: _currentTabIndex != index ? 1 : 0.00,
                              child: animations[index][0]),
                        ],
                      ),
                    ),
                  );
                })
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _handleBottomNavigationBarTap(int tabIndex) {
    if (tabIndex != _currentTabIndex) {
      setState(() {
        var oldTabIndex = _currentTabIndex;
        _currentTabIndex = tabIndex;
        _controllers[oldTabIndex][0].forward(from: 0.0);
        _controllers[_currentTabIndex][1].forward(from: 0.0);
      });
    }
  }

  @override
  void dispose() {
    _controllers.forEach((element) {
      element[0].dispose();
      element[1].dispose();
    });
    super.dispose();
  }
}

const assetsForAnimatedTabIcon = [
  [
    "assets/lottie/wm_main_tab_normal_home.json",
    "assets/lottie/wm_main_tab_select_home.json",
  ],
  [
    "assets/lottie/wm_main_tab_normal_vip.json",
    "assets/lottie/wm_main_tab_select_vip.json",
  ],
  [
    "assets/lottie/wm_main_tab_normal_order.json",
    "assets/lottie/wm_main_tab_select_order.json",
  ],
  [
    "assets/lottie/wm_main_tab_normal_mine.json",
    "assets/lottie/wm_main_tab_select_mine.json",
  ],
];
